<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('tz.quick Search Fields') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" >
            <template #columnAppend>
                <el-table-column prop="append" label="操作" width="180" >
                    <template #default="scope">
                        <el-button type="primary" @click="handleTableClick(scope.row)">{{scope.row.CHECKED == '1'?'查看':'审批'}}</el-button>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :title="'费用审核'"
        :model-value="baTable.form.operate ? true : false"
        @close="baTable.toggleForm()"
        >
            <bill v-if="baTable.form.operate" menu="approve"></bill>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted ,computed, watchEffect,watch} from 'vue'
import baTableClass from '/@/utils/baTable'
import { tz } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
// import PopupTabs from './PopupTabs.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import createAxios from '/@/utils/axios'
import bill from '../bill/index.vue'

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(["edit","delete"])
const baTable = new baTableClass(
    new baTableApi(tz,'s'),
    {
        pk: 'TZID',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('tz.TZID'), prop: 'TZID', align: 'center' },
            { label: t('tz.YBH'), prop: 'YBH', align: 'center' },
            { label: t('tz.SENDER'), prop: 'SENDER', align: 'center' },
            { label: t('tz.GOODSC'), prop: 'GOODSC', align: 'center' },
            { label: t('tz.CONTRACTNO'), prop: 'CONTRACTNO', align: 'center' },
            // 箱号
            { label: t('tz.PORTLOADAGENT'), prop: 'PORTLOADAGENT', align: 'center' },
            //装货地
            //装货时间
            { label: t('tz.SHIPPERSERVICENO'), prop: 'SHIPPERSERVICENO', align: 'center' },
            //送货时间
            { label: t('tz.NEXTVESSEL'), prop: 'NEXTVESSEL', align: 'center' },
            // 回场时间
            //箱型
            //车队
            { label: t('tz.TRANSITEM'), prop: 'TRANSITEM', align: 'center' },
            { label: t('tz.FREIGHTITEM'), prop: 'FREIGHTITEM', align: 'center' },
            { label: t('tz.VESSEL'), prop: 'VESSEL', align: 'center' },
            { label: t('tz.VESSEL'), prop: 'VESSEL', align: 'center' },
            { label: '状态', prop:'CHECKED', align: 'center' , render: 'customTemplate', customTemplate: (row: any, field: any, value: any) => {
                return '<span>' + (value=='1'?'已审批':'待审批') + '</span>';
                // return '<span>' + value + '</span>';
            }},
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'TZID', order: 'desc' },
    },
    {
        defaultItems: [],
    },
    {
        onTableDblclick:(table:any)=>{
            handleTableClick(table.row)
            return false
        }
    }
)

provide('baTable', baTable)

const mainOperate = computed(()=>{
  return baTable.form.operate
})

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

//弹框关闭刷新列表
watch(()=>baTable.form.operate,(newVal:any,oldVal:any)=>{
    if(oldVal == 'edit'&&newVal==''){
        baTable.getIndex()
    }
})

const TZID = computed(()=>{
  return baTable.form.items!.TZID ||''
})
provide('TZID',TZID)


const handleTableClick = (item:object)=>{

    baTable.form.items = item
    baTable.form.operate = 'edit'
    
}

</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'tz',
})
</script>

<style scoped lang="scss"></style>
